import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

let scene = new THREE.Scene();
let geoSphere = new THREE.SphereGeometry(60, 40, 40);
let matSphere = new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  specular: 0x4488ee,
  shininess: 12
});
let mesh = new THREE.Mesh(geoSphere, matSphere);
scene.add(mesh);

let ambient = new THREE.AmbientLight(0x444444); // 环境观的作用是场景的整体提亮，无法产生阴影。通常产生白光即颜色参数的 RGB 分量相同，当为 0xffffff 时场景会明显提亮
scene.add(ambient);

/**
 * 点光源
 */
// let pointLR = new THREE.PointLight(0xffffff);
// let pointLL = new THREE.PointLight(0xffffff);
// pointLR.position.set(400, 300, 200);
// pointLL.position.set(-400, -300, -200);
// scene.add(pointLR);
// scene.add(pointLL);

/**
 * 平行光（太阳光）
 */
// let dirL = new THREE.DirectionalLight(0xffffff, .5);
// scene.add(dirL);

/**
 * 聚光灯
 */
let spotL = new THREE.SpotLight(0xffffff);
spotL.position.set( 100, 1000, 100 );
spotL.castShadow = true;
spotL.shadow.mapSize.width = 1024;
spotL.shadow.mapSize.height = 1024;
spotL.shadow.camera.near = 500;
spotL.shadow.camera.far = 4000;
spotL.shadow.camera.fov = 30;
scene.add( spotL );
// 点光源、平行光和聚光灯都可以投射阴影

let width = window.innerWidth,
    height = window.innerHeight,
    k = width / height,
    s = 200;
let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(400, 400, 400);
camera.lookAt(scene.position);

let renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xaaaaaa, 1);

document.body.appendChild(renderer.domElement);

function render () {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

let controls = new OrbitControls(camera, renderer.domElement);